<template>
  <div class="zhejiao-container">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>文档折角检测</span>
        </div>
      </template>
      
      <el-upload
        class="upload-demo"
        drag
        action="#"
        :auto-upload="false"
        :show-file-list="false"
        accept="image/*"
        @change="handleFileChange"
      >
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">
          拖拽文件到此处或 <em>点击上传</em>
        </div>
        <template #tip>
          <div class="el-upload__tip">
            请上传A4纸扫描件图片
          </div>
        </template>
      </el-upload>

      <div v-if="imageUrl" class="preview-container">
        <canvas ref="canvas" class="preview-canvas"></canvas>
        <div class="result-info" v-if="hasResult">
          <el-alert
            :title="detectionResult"
            :type="hasFoldedCorner ? 'warning' : 'success'"
            :closable="false"
            show-icon
          />
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { UploadFilled } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const imageUrl = ref('')
const canvas = ref(null)
const hasResult = ref(false)
const hasFoldedCorner = ref(false)
const detectionResult = ref('')

// 处理文件上传
const handleFileChange = (file) => {
  const isImage = file.raw.type.startsWith('image/')
  if (!isImage) {
    ElMessage.error('请上传图片文件！')
    return
  }

  const reader = new FileReader()
  reader.onload = (e) => {
    imageUrl.value = e.target.result
    detectFoldedCorner(e.target.result)
  }
  reader.readAsDataURL(file.raw)
}

// 检测折角
const detectFoldedCorner = (imageSrc) => {
  const img = new Image()
  img.onload = () => {
    const ctx = canvas.value.getContext('2d')
    canvas.value.width = img.width
    canvas.value.height = img.height
    
    // 绘制原始图片
    ctx.drawImage(img, 0, 0)
    
    // 获取图片数据
    const imageData = ctx.getImageData(0, 0, canvas.value.width, canvas.value.height)
    const data = imageData.data
    
    // 检测折角
    const corners = detectCorners(data, canvas.value.width, canvas.value.height)
    
    // 绘制检测结果
    if (corners.length > 0) {
      hasFoldedCorner.value = true
      detectionResult.value = `检测到 ${corners.length} 处折角`
      
      // 绘制折角标记
      ctx.strokeStyle = 'blue'
      ctx.lineWidth = 2
      corners.forEach(corner => {
        ctx.beginPath()
        ctx.moveTo(corner.x - 10, corner.y - 10)
        ctx.lineTo(corner.x + 10, corner.y + 10)
        ctx.moveTo(corner.x + 10, corner.y - 10)
        ctx.lineTo(corner.x - 10, corner.y + 10)
        ctx.stroke()
      })
    } else {
      hasFoldedCorner.value = false
      detectionResult.value = '未检测到折角'
    }
    
    hasResult.value = true
  }
  img.src = imageSrc
}

// 折角检测算法
const detectCorners = (imageData, width, height) => {
  const corners = []
  const threshold = 30 // 边缘检测阈值
  
  // 简单的边缘检测算法
  for (let y = 1; y < height - 1; y++) {
    for (let x = 1; x < width - 1; x++) {
      const idx = (y * width + x) * 4
      
      // 计算当前像素与周围像素的差异
      const current = imageData[idx]
      const right = imageData[idx + 4]
      const bottom = imageData[idx + width * 4]
      
      // 如果发现明显的边缘变化，可能是折角
      if (Math.abs(current - right) > threshold && Math.abs(current - bottom) > threshold) {
        corners.push({ x, y })
      }
    }
  }
  
  return corners
}
</script>

<style scoped>
.zhejiao-container {
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
}

.preview-container {
  margin-top: 20px;
  text-align: center;
}

.preview-canvas {
  max-width: 100%;
  border: 1px solid #dcdfe6;
  margin-bottom: 20px;
}

.result-info {
  margin-top: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>